<template>
	<view class="content">
		<view class="activity-item block">
			<view class="activity-middle" @click="navigate1">
				<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/quanfengmian.png" ></image>
				<view class="middle-right">
					<view class="info-top">
						<view class="info-title">
							{{info.businessName}}
						</view>
					</view>
					<view class="info-time" style="display: flex;">
						{{info.amount}}券
					</view>
				</view>
			</view>
		</view>
		<view class="btn-block" >
			<button  
				class="step1" @click="callPhone">联系客服</button>
			<button @click="signShow=true" 
				class="step1">添加好友</button>
		</view>
	<view class="sign-pop" v-if="signShow == true">
			<view class="sign-block">
				<view class="sign-top">
					<view class="left">
						二维码
					</view>
					<view @click="close">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png" mode=""></image>
					</view>
				</view>
				<image :src="cloudStorage+picUrl" show-menu-by-longpress="true" mode="widthFix"></image>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {
		details
	} from '@/api/bank.js';
	import {
		getStorage
	} from '@/util/auth.js';

	export default {
		data() {
			return {
				info: {
					createTime: '',
					deliveryVo: {
						deliveryVo: '',
						result: {
							expName: '',
							number: '',
							list: []
						}
					},
					orderSn: '',
					voucher: '',
					goodsFace: '',
					addressModel: {
						contacts: '',
						area: '',
						address: '',
						phone: ''
					},
					goodsId: '',
					goodsName: '',
					number: '',
					integral: '',
					voucher: '',
					integralGoodsId: ''
				},
				id: null,
				longitude: '',
				latitude: '',
				verificationFilepath: '',
				signShow: false,
				picUrl:'',
				phone:''
			}
		},
		methods: {
			details(id)
			{
				details({id:id}).then(res=>{
					this.info=res
					this.phone=res.tbSellingCustomer.phone
					this.picUrl=res.tbSellingCustomer.picUrl
				})
			},
			close()
			{
				this.signShow=false
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success() {
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
			
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.latitude = getStorage('latitude');
			this.longitude = getStorage('longitude');
			this.details(this.id)
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 20rpx;
		background: #EFEFEF;
		padding: 30rpx;

		.block {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.logistics-block {
			.info-item:last-child {
				border-bottom: none;
				padding-top: 20rpx;
			}

			.info-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EFEFEF;
				padding-bottom: 20rpx;

				.iconfont {
					width: 80rpx;
					font-size: 38rpx;
					color: #FF2F34;
				}

				.title-item {
					width: calc(100% - 80rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: calc(100% - 45rpx);
						margin-top: 10rpx;

						.text {
							width: 100%;
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.address {
							font-size: 32rpx;
						}

						.time {
							font-size: 26rpx;
							color: #999;
							margin-top: 15rpx;
						}
					}

					.more {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}

		.activity-item {
			margin-top: 30rpx;

			.activity-middle {
				display: flex;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}

				.middle-right {
					width: calc(100% - 140rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info-top {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.info-title {
							width: calc(100% - 120rpx);
							font-size: 30rpx;
						}

						.involution {
							width: 120rpx;
							text-align: end;
							color: #767676;
							font-size: 28rpx;
						}
					}

					.info-time {
						font-size: 28rpx;
						font-weight: bold;
						line-height: normal;
						letter-spacing: 0em;
						color: #1A1A1A;
					}
				}
			}

			.activity-bottom {
				border-top: 1px solid #EFEFEF;
				font-size: 26rpx;
				color: #767676;
				margin-top: 20rpx;
				padding-top: 20rpx;

				.cancel {
					margin-bottom: 15rpx;
				}
			}
		}

		.btn-block {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			background: #fff;
			height: 180rpx;
			padding: 30rpx;
			bottom: 0;
			left: 0;

			// .step:first-child {
			// 	// color: #FF2F34;
			// 	// background: none;
			// 	// border: 1px solid #FF2F34;
			// 	margin-right: 20rpx;
			// 	// font-size: 28rpx;
			// }

			.step {
				width: 30%;
				height: 80rpx;
				display: flex;
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #fff;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
			
			.cancel{
				width: 30%;
				height: 80rpx;
				display: flex;
				background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
				color: #000;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
			.step1 {
				width: 320rpx;
				height: 80rpx;
				font-size: 26rpx;
				display: flex;
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #fff;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				// margin-right: -10rpx;
			}
		}
	.sign-pop {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999999;
			width: 100vw;
			height: 100vh;

			.sign-block {
				width: calc(100% - 240rpx);
				height: 650rpx;
				background: #fff;
				z-index: 99;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 29%;
				box-shadow: 0 0 6px 0px #dadada;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;

				.sign-top {
					display: flex;
					justify-content: space-between;
					width: 100%;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				image {
					width: 100%;
				}
			}
		}
	
	}
</style>